<template>
  <div class="ma-content-block lg:flex justify-between">
    <sa-table ref="crudRef" :options="options" :columns="columns" :searchForm="searchForm" @resetSearch="resetSearch">
      <template #tableSearch>
        <a-col :span="6">
          <a-form-item field="user_name" label="会员账号">
            <a-input placeholder="会员账号" v-model="searchForm.user_name" allow-clear @keydown.enter="refresh"></a-input>
          </a-form-item>
        </a-col>
        <a-col :span="6">
          <a-form-item field="uid" label="会员UID">
            <a-input placeholder="会员UID" v-model="searchForm.uid" allow-clear @keydown.enter="refresh"></a-input>
          </a-form-item>
        </a-col>
        <a-col :span="6">
          <a-form-item field="id_card" label="身份证字号">
            <a-input placeholder="身份证字号" v-model="searchForm.id_card" allow-clear @keydown.enter="refresh"></a-input>
          </a-form-item>
        </a-col>
        <a-col :span="6">
          <a-form-item field="mobile" label="手机号">
            <a-input placeholder="手机号" v-model="searchForm.mobile" allow-clear @keydown.enter="refresh"></a-input>
          </a-form-item>
        </a-col>
        <a-col :span="6">
          <a-form-item field="state" label="状态">
            <sa-select placeholder="请选择" :allowClear="false" :data="paramsData.state" v-model="searchForm.state"
              @change="refresh"></sa-select>
          </a-form-item>
        </a-col>

        <a-col :span="10">
          <a-form-item field="date" label="注册日期">
            <a-range-picker v-model="searchForm.date" format="YYYY-MM-DD" :allow-clear="true"
              @change="refresh"></a-range-picker>
          </a-form-item>
        </a-col>
      </template>
      <template #operationAfterExtend="{ record }">
        <a-button type="primary" size="mini" shape="round" @click="handleOrder('detail', record)">详情</a-button>
      </template>
    </sa-table>
    <edit-form ref="editRef" @success="refresh"></edit-form>
    <detail ref="detailRef" @success="refresh"> </detail>

  </div>
</template>
<script setup>
import { onMounted, ref, reactive, computed, watch } from 'vue'
import memberApi from '@/api/system/member'
import SaTable from '@cps/sa-table/index.vue'
import SaSelect from '@cps/sa-select/index.vue'
import { Message } from '@arco-design/web-vue'
import { throttle } from 'lodash';
import ENUMS from '@/utils/enums'
import editForm from './edit.vue'
import detail from './detail.vue'
import tool from '@/utils/tool';
const exportLoading = ref(false)
const crudRef = ref()
const editRef = ref()
const noteRef = ref(null)
const detailRef = ref(null)
const orderRef = ref()
const searchForm = ref({
  time: '',
  uid: '',
  date: [],
  user_name: '',
  id_card: '',
  mobile: '',
  state: 99,
})
const options = reactive({
  api: memberApi.userList,//表格数据接口
  operationColumnWidth: 140,//操作欄
  showSearch: true,
  columnAlign: 'left',
  pageSimple: false,//是否展示操作欄有 以及工具欄 false 为都显示  true 不现实
  isTreeTable: false,//如果数据中有children 并且不想显示樹狀结構 请置false
  isExpand: false,//展開所有子樹
  singleLine: false,
  operationColumn: true,
  edit: {//操作欄编辑按鈕
    show: true,
    auth: ['/core/menu/update'],
    func: async (record) => {
      editRef.value?.open('edit', record)
      editRef.value?.setFormData(record)
    },
  },
})
const columns = reactive([
  { title: '会员ID', dataIndex: 'id', width: 100 },
  { title: '会员账号', dataIndex: 'user_name', width: 150 },
  { title: '姓名', dataIndex: 'true_name', width: 150 },
  { title: '昵称', dataIndex: 'nick_name', width: 150 },
  { title: '冠名', dataIndex: 'title_name', width: 150 },
  { title: '推荐人', dataIndex: 'parent_text', width: 150 },
  { title: '手机号', dataIndex: 'mobile', width: 150 },
  { title: '邮箱', dataIndex: 'email', width: 150 },
  { title: '证件号', dataIndex: 'id_card', width: 150 },
  { title: '等级', dataIndex: 'level_text', width: 150 },
  { title: '状态', dataIndex: 'state_text', width: 150 },
  { title: '注册时间', dataIndex: 'create_time', width: 180 },

])

// const exportExcel = throttle(async () => {
//   exportLoading.value = true
//   const queryParams = new URLSearchParams(searchForm.value).toString();
//   const downloadUrl = `${import.meta.env.VITE_APP_BASE_URL}/user/admin/user/exportUserList?fro_source=1&${queryParams}`
//   window.location.href = downloadUrl
//   setTimeout(() => {
//     exportLoading.value = false
//   }, 1500);
// }, 3000)
const initPage = async () => { }
const resetSearch = () => {
  searchForm.value.date = []
}
const refresh = async () => {
  crudRef.value?.refresh()
}
const handleOrder = async (type, data) => {
  detailRef.value?.open(data)

}
const other_data = ref({})
const paramsData = ref([])
const getParams = async () => {
  const { data } = await memberApi.userListParams()
  other_data.value = data.totalData
  paramsData.value = tool.transObj(data, [])
  paramsData.value.state.unshift({ value: 99, title: '全部' })
}
onMounted(async () => {
  initPage()
  refresh()
  getParams()
})
</script>

<style scoped>
.icon {
  width: 1em;
}

div {
  font-size: 12px;
}
</style>